<?php
    echo includeFile( APP_PAGE_PARTS.'forms/form_file_upload.php', array(), true );
?>

<style>
    #usersListCont {
        margin-top: 25px;
    }
    
    .userGroupHead {
        color: #666;
        cursor: pointer;
    }
    
    .userGroupCount {
        font-weight: normal !important;
        font-size: 17px;
        color: #999;
        padding-left: 20px;
    }

    .thumbnails .objCell.user-active {
        box-shadow: 0 1px 3px rgba(153, 204, 00, 1);
    }
    .thumbnails .objCell.user-inact { box-shadow: 0 1px 3px #DE2222; }
    .thumbnails .objCell.user-deleted { box-shadow: 0 1px 3px #aaa; }
    .thumbnails .objCell.user-active:hover, .selected { border-color: #99cc00; }
    .thumbnails .objCell.user-inact:hover { border-color: #DE6666; }
    .thumbnails .objCell.user-deleted:hover { border-color: #ccc; }
</style>




<h2>Пользователи и права доступа</h2>

<div class="" id="usersListCont"></div>








<div class="hidden" id="users-access-templates">
    
    <div id="group-tmpl">
        
        <div id="userGroup-{%id%}" class="well well-small" style="margin-bottom:15px;">
            <h3 id="userGroupHead-{%id%}" class="userGroupHead" data-collapsed="1" onclick="return groupHeadClick(this);">
                <i id="userGroupIcon-{%id%}" class="icon-chevron-down"></i>  
                {%filter_name%}
                <span class="userGroupCount">[ {%usersLength%} ]</span>
            </h3>
            <ul id="userGroupUsers-{%id%}" class="thumbnails" style="display:none; margin-top: 15px;"> 
                {%usersHtml%}
            </ul>
        </div>
        <div class="clear_both" ></div>
        
    </div>
    
    <ul id="user-tmpl" class="hidden">
        <li id="user-cell-{%id%}" class="span3 thumbnail noDataCell objCell {%actClass%}" onclick="return userItemClick(this);">
            <div class="userphoto-container min" title="{%login%}">
                <img id="userphoto-image-{%id%}" class="userphoto-image" alt="{%login%}" src="<?php echo APP_HTML_DEF_AVA; ?>" data-src="{%photo%}">
            </div>
            <div class="userinfo-fio nowrap">{%first_name%} {%last_name%}</div>
            <div class="userinfo-otherinfo nowrap">{%organisation%}</div>
            <div class="userinfo-otherinfo nowrap">{%job_position%}</div>
        </li>
    </ul>
    
</div>



<?php

echo includeFile(APP_PAGE_PARTS.'forms/form_users_access.php');
echo includeFile( APP_PAGE_PARTS.'forms/form_edit_user.php', array(), true );

?>


<script>
Elm.usersListCont = $('#usersListCont');
Elm.userDataCont = $('#userDataCont');
Elm.Users = [];
Elm.Groups = [];

function markUserInact(id) {
    $("#user-cell-"+id).addClass('user-inact').removeClass('user-active');
}

function markUserActive(id) {
    $("#user-cell-"+id).addClass('user-active').removeClass('user-inact');
}

function hideUser(id) {
    $("#user-cell-"+id).hide();
}



function loadUsersList() {
    var send = {
        action: '<?php echo ACTIONS::USERS_FULL_LIST; ?>'
    };
    
    jsonRequest(
        'users.php',
        send,

        function(data) {
            if(checkSession(data)) {
                if (!data.state) {
                    uiAlert(data.message,'Error');
                    return;
                }

                if (data.hasOwnProperty('response_data') && data.response_data) {
                    var resp = data.response_data;
                    if (resp.hasOwnProperty('data')) {
                        $('<div class="accordion" id="usersGroups">').
                            html(renderUsersList(resp.data)).
                            appendTo(Elm.usersListCont);
                        $('#usersListCont').triggerHandler('userDataSuccess');
                        return;
                    }
                }
                uiAlert('Неверный ответ сервера','Error');
            }
            else Elm.loginFormModal.dialog('open');
        },

        function() {
            uiAlert('Ошибка соединения','Error');
        }
    );
}


function renderUsersList(data) {
    var html = '';
    for (var i in data) {
        if (!data.hasOwnProperty(i)) continue;
        html += renderUserGroup(data[i]);
        Elm.Groups[i] = data[i];
    }
    return html;
}

function renderUserGroup(data) {
    data = data || {};
    data.usersHtml = '';
    if (data.hasOwnProperty('users') && data.users) {
        data.usersLength = 0;
        for (var i in data.users) if (data.users.hasOwnProperty(i)) data.usersLength++;

        if (data.usersLength*1 < 1) return '';
        for (var i in data.users) {
            if (!data.users.hasOwnProperty(i)) continue;
            data.usersHtml += renderUser(data.users[i]);
            Elm.Users[i] = data.users[i];
        }
    }
    return fillTemplate('#group-tmpl', data);
}

function renderUser(data) {
    //return data.id + ' ';
    if (data.rang*1 < 1) data.actClass = 'user-inact';
    else data.actClass = 'user-active';
    if (data.deleted*1 > 0 ) data.actClass = 'user-deleted hidden';
    var div = $('<div class="hidden">').html(fillTemplate('#user-tmpl', data));
    var img = div.find('img.userphoto-image');
    img.attr('src', img.attr('data-src'));
    var htm = div.html();
    div.remove();
    return htm;
}

function appendUserToGroup(user) {
    var grId = user.filter_id;
    var grU = $('#userGroupUsers-'+grId);
    grU.append(renderUser(user));
}

function reRenderUser(data) {
    var oldElm = $('#user-cell-'+data.id);
    if (!oldElm.length) appendUserToGroup(data);
    else {
        var newHtml = renderUser(data);
        oldElm.attr('id', oldElm.attr('id')+'-old');
        oldElm.after(newHtml).remove();
    }
}


function collapseGroup (id) {
    $('#userGroupUsers-'+id).hide(300);
    $('#userGroupIcon-'+id).attr('class', 'icon-chevron-down');
    $('#userGroupHead-'+id).attr('data-collapsed', 1);
}
    
function expandGroup (id) {
    $('#userGroupUsers-'+id).show(500);
    $('#userGroupIcon-'+id).attr('class', 'icon-chevron-up');
    $('#userGroupHead-'+id).attr('data-collapsed', 0);
}    
    
function groupHeadClick(elm) {
    elm = elm || {id:false};
    var id = elm.id.replace('userGroupHead-','');
    if (!id) return false;
    var jelm = $(elm);
    if (jelm.attr('data-collapsed')*1>0) expandGroup (id);
    else collapseGroup (id);
    return false;
}   


function userItemClick(elm) {
    elm = elm || {id:false};
    var userId = elm.id.replace('user-cell-','');
    if (!userId) return false;
    
    openUserAccessDialog(userId, function(cdata) {
        // refresh
    });
    return false;
}
    
    
$(function() {
    
    loadUsersList();
    
    
    
});
</script>
